<template>
  <div class="mycard-container">
    <div class="mycard-title">{{ title }}</div>
    <bsc-subtitle :subtitle="subtitle" />
    <div class="mycard-box">
      <div class="mycard-top">
        <div class="mycard-top-img">
          <img
            class="maycardimg"
            src="https://assets.easyv.cloud/data/img/96411/3623190/2n0u1j248v_1757648456171_mclsb50elx.png"
            alt=""
          />
        </div>
        <div class="mycard-top-text">
          国投钦州港口有限公司成立于2010年3月24日，由国投交通控股有限公司、广西沿海铁路股份有限公司两方按88.78比11.22股权比例投资组成。公司地处北部湾经济核心区，背靠大西南、面向东南亚、连接粤港澳的区位交通优势。
        </div>
      </div>
      <div class="mycard-z">
        公司以“和”文化，建设“绿色美港”，以“用心、和谐、安全、创新、服务”的企业精神，竭诚为广大客户服务。通过不断提升核心竞争力，融入国家“加快建设西部陆海新通道”战略部署，为国投集团“建成世界一流的资本投资公司”，实现壮美广西，向海而兴、向海图强！
      </div>
      <div class="mycard-b">
        <carousel-3d
          :autoplay="true"
          :autoplay-timeout="4000"
          :display="3"
          :width="300"
          :height="150"
          :space="200"
          :perspective="0"
          :controls-visible="false"
          :clickable="true"
        >
          <slide
            v-for="(image, index) in carouselImages"
            :key="index"
            :index="index"
          >
            <div class="carousel-slide-content">
              <img :src="image.url" :alt="image.alt" />
            </div>
          </slide>
        </carousel-3d>
        <!-- <carousel-3d :perspective="0" :space="400" :display="3">
          <slide v-for="(slide, i) in slides" :index="i">
            <span class="title">You know</span>
            <p>You know, being a test pilot isn't always the healthiest business in the world.</p>
          </slide>
        </carousel-3d> -->
      </div>
    </div>
  </div>
</template>

<script>
import BscSubtitle from "./subtitle.vue";
import { Carousel3d, Slide } from "vue-carousel-3d";

export default {
  name: "Bscqyglcard",
  components: {
    BscSubtitle,
    Carousel3d,
    Slide,
  },
  props: {
    title: {
      type: String,
      required: true,
      default: "默认标题",
    },
  },
  data() {
    return {
      subtitle: "企业简介",
      carouselImages: [
        {
          url: "https://assets.easyv.cloud/data/96411/3623190/img/ol3v2xqrp_1761834956477_yt8b8pshdv.jpg",
          alt: "图片1",
        },
        {
          url: "https://assets.easyv.cloud/data/96411/3623190/img/ea6uj4nvcr_1761834946721_1pvcgt0npg.jpg",
          alt: "港口图片1",
        },
        {
          url: "https://assets.easyv.cloud/data/96411/3623190/img/yfocr1n4c5_1757654292452_xh9t7tzrd6.jpg",
          alt: "港口图片2",
        },
      ],
    };
  },
  mounted() {
    // vue-carousel-3d 会自动处理轮播逻辑
  },
};
</script>

<style scoped lang="scss">
.mycard-container {
  width: 100%;
  height: 48%;
  position: relative;
  color: #fff;
  background: url("~@/assets/images/qyjj.png") left center / 100% 100% no-repeat;
  .mycard-title {
    position: absolute;
    top: 5px;
    font-size: 18px;
    font-weight: 600;
    width: 100%;
    text-align: center;
    text-shadow: rgb(0, 117, 255) 0px 0px 8px;
    padding: 0px;
  }
  .mycard-box {
    position: absolute;
    top: 40px;
    width: 100%;
    height: 90%;
    padding: 30px;
    // border: 1px solid #fff;
    .mycard-top {
      width: 100%;
      height: 30%;
      position: relative;
      .mycard-top-img {
        width: 48%;
        height: 120%;
        .maycardimg {
          width: 100%;
          height: 100%;
        }
      }
      .mycard-top-text {
        word-break: break-all;
        overflow-wrap: break-word;
        white-space: pre-line;
        font-family: Microsoft Yahei;
        font-size: 13px;
        color: rgb(255, 255, 255);
        letter-spacing: 0px;
        line-height: 18px;
        text-align: left;
        width: 50%;
        font-weight: normal;
        display: inline-block;
        justify-content: flex-start;
        position: absolute;
        top: 0px;
        left: 50%;
        filter: drop-shadow(rgb(0, 117, 255) 0px 0px 8px);
      }
    }
    .mycard-z {
      word-break: break-all;
      overflow-wrap: break-word;
      white-space: pre-line;
      font-family: Microsoft Yahei;
      font-size: 12px;
      color: rgb(255, 255, 255);
      letter-spacing: 0px;
      line-height: 18px;
      text-align: left;
      width: 100%;
      font-weight: normal;
      display: inline-block;
      justify-content: flex-start;
      // position: absolute;
      // top: 47%;
      // transform: translateY(-50%);
      margin-top: 30px;
      filter: drop-shadow(rgb(0, 117, 255) 0px 0px 8px);
    }
    .mycard-b {
      width: 100%;
      height: 40%;
      // border: 1px solid #fff;
      overflow: hidden;
      position: relative;
      margin-top: 10px ;
    }
  }
}
::v-deep .carousel-3d-container {
  margin: 0;
}
.carousel-slide-content {
  width: 100%;
  height: 100%;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    // object-fit: cover; // 保持比例并填充整个容器
    // object-position: center; // 图片居中显示
  }
}
</style>
